<template>
	<view class="sendInformation">
		<view class="statement">尊敬的用户您好，为保证遗嘱的有效性，请将遗嘱的纸质文件寄送到以下这个地址进行统一保存。</view>
		<view class="info">
			<view class="title">收件人信息：</view>
			<view class="line"></view>
			<view class="text">公司名：XXXX</view>
			<view class="text">联系电话：15479654544</view>
			<view class="text">公司地址：XXX</view>
		</view>
		<uni-forms :modelValue="formData" ref="form" :rules="rules">
			<view class="subTitle">请选择您寄送的物流类型</view>
			<uni-data-select v-model="formData.type" :localdata="list" @change="change" class="select"></uni-data-select>
			<view class="subTitle">请输入您的物流单号</view>
			<uni-forms-item name="number" label=" ">
				<uni-easyinput v-model="formData.number" type="text" placeholder="请输入您的物流单号" />
			</uni-forms-item>
		</uni-forms>
		<button class="button" type="primary" @click="submit()">
			确定
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{value: '1',text: "测试1"},
					{value: '2',text: "测试2"}
				],
				formData: {
					type:'',
					number: '',
				},
				rules: {
					number: {
						rules: [{
							required: true,
							errorMessage: '请输入您的物流单号',
						}]
					}
				}
			}
		},
		methods: {
			change(e) {
				this.formData.type=e
				console.log("e:", e);
			},
			// 提交表单数据
			submit(){
				this.$refs.form.validate().then(res=>{
					alert('表单数据信息')
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(248, 248, 248, 1);
		height: 100%;
	}
	uni-button[type=primary] {
		color: #fff;
		background-color: #53B3D9;
	}

	.sendInformation {
		.statement {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			padding: 34rpx 28rpx 37rpx;
		}

		.info {
			background-color: rgba(255, 255, 255, 1);
			padding: 43rpx 22rpx 54rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.line {
				width: 100%;
				height: 1rpx;
				background-color: #F6F6F6;
				margin: 22rpx 0 27rpx;
			}

			.text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 46rpx;
			}
		}

		.subTitle {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 38rpx 22rpx 29rpx;
		}

		.uni-stat__select {
			background-color: #fff;
			width: 100%;
			padding: 0;
			height: 83rpx;
			line-height: 83rpx;
			&>view{
				width: 100%;
			}
			/deep/.uni-select__input-placeholder{
				color: #999999;
			}
			/deep/.uni-select__input-box {
				padding-left: 12rpx;
				padding-right: 12rpx;
			}

			/deep/.uni-select,
			/deep/.uni-stat__actived {
				border: none;
				outline: none;
			}

			.uni-select__input-text,
			/deep/uni-view,
			.uni-select {
				width: 100%;
			}
		}
		.uni-forms-item{
			background-color: #fff;
			height: 83rpx;
			line-height: 83rpx;
			/deep/.uni-forms-item__label{
				display: none;
			}
			/deep/.is-input-border{
				border: none;
				outline: none;
			}
			/deep/.uni-error-message{
				left: 22rpx;
				display: none;
			}
		}
		.button{
			border-radius: 44rpx;
			margin: 0 auto;
			margin-top: 51rpx;
			width: calc(100% - 44rpx);
		}
	}
</style>
